<%@ page import="com.pixiv.Entity.User" %>
<%--
  Created by IntelliJ IDEA.
  User: hasee
  Date: 2021/11/25
  Time: 17:02
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel = "stylesheet" href = "${pageContext.request.contextPath}/pixiv/css/header.css">
    <link rel = "stylesheet" href = "${pageContext.request.contextPath}/common/layui/css/layui.css">
    <script src = "${pageContext.request.contextPath}/common/jquery3.6.0.js"></script>
    <script src = "${pageContext.request.contextPath}/common/layui/layui.js"></script>
    <%
        User u = (User) session.getAttribute("GLOBAL_USER_OBJECT");
    %>

</head>
<body>
<div id = "head_test_0">
    <div class="layui-main layui-container">
        <div class="layui-col-md4">
            <!--<img style = "float:left;border:1px solid black;" src = "" width = "39px" height = "39px">-->
            <i id = "pointToLeft" class="layui-icon">&#xe857;</i>
            <img id = "gotoPosition" src = "${pageContext.request.contextPath}/pixiv/img/pixiv.png"
                 width = "120px";height = "65px"  >
            <script type = "text/javascript">
                document.querySelector("#gotoPosition").onclick = function(){
                    location.href = "${pageContext.request.contextPath}/position/gotoPosition";
                }
            </script>

            <div style = "line-height:49px;float:left;"></div>

        </div>
        <div class="layui-col-md3">

        </div>
        <div class="layui-col-md5">

            <ul class="layui-nav" style = "background-color:ghostwhite;flex-wrap:wrap;">
                <li style = "position:relative;left:10px;top:0px;">
                    <input type = "button" value = "投稿" id = "upPictureToTarget"><!--按钮-->
                </li>
                <li class="layui-nav-item" style = "position:relative;left:165px;top:-47px;">
                    <img src="${pageContext.request.contextPath}/user/getUserIcon" id = "UserIconDisplay" class="layui-nav-img">
                    <dl class="layui-nav-child" style = "width:150px;margin-left:-40px;margin-top:-16px;">

                        <img src = "${pageContext.request.contextPath}/user/getUserIcon"
                             style = "width:75px;height:75px;border-radius:35px;border:0px;">
                        <dd style = "color:rgba(20,20,20,0.7);">账号id:<%out.write(String.valueOf(u.getUserID()));%></dd>
                        <dd style = "color:rgba(20,20,20,0.7);">用户姓名:<%out.write(u.getName() );%></dd>
                        <dd style = "color:rgba(20,20,20,0.7);">e-mail:<%out.write(u.getEMail() );%></dd>
                        <dd style = "color:rgba(20,20,20,0.7);"><a href="${pageContext.request.contextPath}/position/gotoSetUser">设置</a></dd>
                        <dd style = "color:rgba(20,20,20,0.7);"><a href="${pageContext.request.contextPath}/position/gotoMyTitle">查看我的图库</a></dd>
                        <dd style = "color:rgba(20,20,20,0.7);"><a href="${pageContext.request.contextPath}/Login/gotoLogin">退出登录</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>
    <script type = "text/javascript">
        //投稿按钮
        document.querySelector("#upPictureToTarget").onclick = function(){
            location.href = "${pageContext.request.contextPath}/user/gotoUpload";
        }
        //跳转个人界面
        document.querySelector("#UserIconDisplay").onclick = function(){
            location.href = "${pageContext.request.contextPath}/user/gotoSetUser";
        }
        //显示公告
        document.querySelector("#pointToLeft").onclick = function(){
            var left = document.querySelector("#left_topInformation");
            left.style.display = "block";
        }
    </script>

</div>

<div style = "margin-top:0px;margin-left:10px;width:285px;height:900px;position:fixed;
    left:1065px;top:80px;z-index:20;background-color:rgba(143,147,204,0.1);" id = "rightUser">
    <img id = "userIconBig" style = "margin-top:20px;margin-left:20px;border-radius:25px;width:50px;height:50px;float:left;">
    <h2 style = "margin-top:31px;margin-left:5px;" id = "name"></h2>
    <br>
    <input type = "button" value = "查看用户" style =
            "margin-left:15px;margin-top:20px;width:100px;height:30px;border-radius:15px;border:0px;
            background-color:rgba(143,147,204,1.0);color:rgba(255,255,255,1.0);font-size:12px;cursor:pointer;"
    id = "showUserInformation">

    <input type = "button" value = "删除帖子" style =
            "margin-left:15px;margin-top:20px;width:100px;height:30px;border-radius:15px;border:0px;
            background-color:rgba(232,147,204,1.0);color:rgba(255,255,255,1.0);font-size:12px;cursor:pointer;"
           id = "delTitle">

    <div style="width:279px;height:1px;border-top:1px solid rgba(0,0,0,0.15);margin-top:10px;"></div>
    <div style = "margin-left:5px;width:279px;height:600px;">
        <h3 style = "text-align:center;width:279px;" id = "TitleCaption"></h3><br>
        <h4 style = "text-align:left;width:279px;" id = "TitleContext"></h4>

        <div style="width:279px;height:1px;border-top:1px solid rgba(0,0,0,0.15);margin-top:50px;"></div>
        <h4 style = "text-align:left;width:279px;margin-top:0px" id = "isOrgain"></h4>
        <h4 style = "text-align:left;width:279px;margin-top:0px" id = "ageLimit"></h4>
        <h4 style = "text-align:left;width:279px;margin-top:0px" id = "label"></h4>
        <h4 style = "text-align:left;width:279px;margin-top:0px" id = "uploadTime"></h4>
    </div>
    <script type = "text/javascript">
        var right = document.querySelector("#rightUser");
        window.onscroll = function()
        {
            let y = window.pageYOffset;
            if (y < 100)
            {
                right.style.top = (100 - y) + "px";
            }else{
                right.style.top =  "0px";
            }
        }

        document.querySelector("#showUserInformation").onclick = function(){
            location.href = "${pageContext.request.contextPath}/position/gotoShowUserInfor";
        }

        function getAccel(val1,val2,val3,val4)
        {
            let flat = val1 / val2;
            return val3 + parseInt(flat * (val4 - val3));
        }
    </script>
    <script type = "text/javascript">
        var delTitle = document.querySelector("#delTitle");
        delTitle.onclick = function(){
            layer.confirm('确定要删除这条帖子吗?',
                {btn: ['确定','我按错了']},
                function()
                {
                    $.ajax({
                        url: "${pageContext.request.contextPath}/title/deleteTitle",
                        type: "get",
                        dataType:"json",
                        success:function(req)
                        {
                            if (req.flag == 1) {
                                //layer.msg("删除帖子成功");
                                location.href = "${pageContext.request.contextPath}/position/gotoPosition";
                            }else (req.flag == 2)
                            {
                                layer.msg("删除失败,非原作者");
                            }
                        }
                    });

                },
                function(){

                });
        };
    </script>

</div>

<div id = "head_test_1">
    <div class = "layui-main layui-container" style = "width:1200px;height:100%;">
        <div style = "width:900px;float:left;background-color:rgba(255,255,255,1.0);" id = "showPicture">
        </div>
        <div style = "margin-top:0px;margin-left:10px;float:left;width:180px;">
        </div>
        <div style = "width:900px;float:left;margin-top:50px;" id = "commitDiv">
        </div>
    </div>

    <style type = "text/css">
        #head_test_1{
            width:100%;
            height:900px;
            position:absolute;
            left:0px;
            top:80px;
        }
        #showPicture>img{
            width:700px;
            size:700px;
            margin-left:100px;
            margin-top:10px;
        }
        #coverShow:hover{
            background-color:rgba(0,0,0,0.05);
        }
    </style>
    <script type = "text/javascript">
        $.ajax({
            url:"${pageContext.request.contextPath}/position/SendShowTitlePacket",
            dataType:"json",
            type:"post",
            success:function(req){
                if (req.flag == 1) {
                    updateBasicInformation(req);

                    var total = req.pictureTotal;
                    var show = document.querySelector("#showPicture");
                    for (var i = 1;i<total + 1;i++)
                    {

                        var path = "${pageContext.request.contextPath}/title/getTitleP?uuid=" + req.uuid + "&location=" + i;
                        var img = document.createElement("img");
                        img.setAttribute("src",path);
                        show.appendChild(img);
                    }

                }
            }
        });

        function updateBasicInformation(req)
        {
            var caption = $("#TitleCaption");
            caption.append(req.caption);

            var context = $("#TitleContext");
            context.append(req.context);

            var isOrgain = $("#isOrgain");
            if (req.orgin == 1)
                isOrgain.append("原创");
            else if (req.orgin == 2)
                isOrgain.append("搬运");

            var label = $("#label");
            label.append(req.label);

            var ageLimit = $("#ageLimit");
            if (req.ageLimit == 1)
                ageLimit.append("全年龄");
            else if (req.ageLimit == 2)
                ageLimit.append("18+");
            else if (req.ageLimit == 3)
                ageLimit.append("12+");

            var uplaodTime = $("#uploadTime");
            uplaodTime.append(req.uplaodTime);

            var userid = req.userid;

            var userIcon = document.querySelector("#userIconBig");
            userIcon.setAttribute("src","${pageContext.request.contextPath}/user/getUserIconByID?id=" + userid);

            var name = $("#name");
            name.append(req.name);
        }

    </script>
    <script type = "text/javascript">
        $.ajax({
            url:"${pageContext.request.contextPath}/commit/getCommit",
            dataType:"json",
            type:"post",
            success:function(req) {
                if (req.flag == 0)
                {

                }else if (req.flag == 1)
                {
                    var lst = req.data;
                    var div = document.querySelector("#commitDiv");

                    for (var index = 0;index<lst.length;index++)
                    {
                        var commit = lst[index];

                        var div_sub = document.createElement("div");
                        div_sub.setAttribute("style","margin:0px;margin-left:100px;width:900px;height:150px;");

                        var img = document.createElement("img");
                        img.setAttribute("src","${pageContext.request.contextPath}/user/getUserIconByID?id=" + commit.userid);
                        img.setAttribute("style","width:50px;height:50px;border-radius:25px");
                        div_sub.appendChild(img);

                        var label = document.createElement("h3");
                        label.setAttribute("style","margin-left:53px;margin-top:-46px;");
                        label.append(commit.username);
                        div_sub.appendChild(label);

                        var label2 = document.createElement("h4");
                        label2.setAttribute("style","margin-left:53px;");
                        label2.append(commit.commitcontext);
                        div_sub.appendChild(label2);

                        div.appendChild(div_sub);

                    }
                }
            }
        });
    </script>
</div>

<div id = "head_test_2">

</div>

</body>
</html>
